<template>
  <div class="departments-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first" />
      </el-tabs>

      <div class="box">
        <!-- 标题 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end" style="text-align: right">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="addDep('')"
                    >添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 树形组件 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <template #default="scoped">
            <!-- <template v-slot="{ node, data }">{{ data.label }}</template> -->
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="4">
                <svg-icon icon-class="home" /><span>{{ scoped.data.name }} ==={{ scoped.data.id }}
                </span>
                <!-- <svg-icon icon-class="home" /><span>{{ data.label }}</span> -->
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end" style="text-align: right">
                  <!-- 两个内容 -->
                  <el-col>{{ scoped.data.manager }} </el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <!-- 添加 -->
                        <el-dropdown-item
                          @click.native="addDep(scoped.data.id)"
                        >添加子部门</el-dropdown-item>
                        <!-- 查看 -->
                        <el-dropdown-item
                          @click.native="editDep(scoped.data)"
                        >查看部门</el-dropdown-item>
                        <!-- 删除 -->
                        <el-dropdown-item
                          @click.native="delDep(scoped.data.id)"
                        >删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </div>
    </el-card>

    <!-- dialog -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleAdd"
      width="50%"
      @close="closeDia"
    >
      <!-- 插槽 -->
      <!-- :pid="pid" -->
      <deptDialog
        v-if="dialogVisibleAdd"
        ref="dept"
        :pid="pid"
        :is-edit="isEdit"
        :row="row"
        :visible.sync="dialogVisibleAdd"
        @success="success"
      />
    </el-dialog>
  </div>
</template>

<script>
// 导入
import deptDialog from './deptDialog.vue'
import { delDepartment, getDepartments } from '@/api/departments'
import arrayToTree from 'array-to-tree'
export default {
  components: {
    deptDialog
  },
  data() {
    return {
      activeName: 'first',
      dialogVisibleAdd: false,
      pid: '',
      isEdit: false,
      row: {},
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }, // 触发函数
  created() {
    this.isEdit = false
    // 获取组织架构数据列表
    this.getDep()
  },
  methods: {
    // 调用
    async getDep() {
      const res = await getDepartments()
      // this.data = res.data.depts
      // 用工具函数把 平铺的数组转成 树型数据
      this.data = arrayToTree(res.data.depts, {
        parentProperty: 'pid',
        customID: 'id'
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    // 添加部门
    // 没有值
    addDep(pid) {
      this.dialogVisibleAdd = true
      this.isEdit = false
      // 获取pid
      this.pid = pid
    },
    success() {
      // 关闭对话框，更新数据
      this.dialogVisibleAdd = false
      //   刷新页面
      this.getDep()
    },
    // 删除部门
    async delDep(id) {
      const res = await delDepartment(id)
      // console.log(res)
      if (res.code === 10000) return this.getDep() // 刷新页面
    },
    // 查看
    editDep(row) {
      // console.log(row)
      this.dialogVisibleAdd = true
      this.isEdit = true
      this.row = row
    },
    closeDia() {
      this.$refs.dept.close()
      //   关闭对话框，需要再次回到编辑对话框
      //   this.isEdit = false
    }
  }
}
</script>

<style lang="scss" scoped>
.departments-container {
  padding: 30px;
  .box {
    padding: 30px 120px 0;
  }
}
</style>
